<template>
	<view class="container">
		<view class="top">
			<u-icon @click="return_btn" name="arrow-left" color="#fff" size="30"></u-icon>
			<u--text text="经营统计" align="center" color="#fff" size="22" margin="4vh 0 0 0"></u--text>
		</view>
		<view class="bgtop"></view>
		<view class="card">

			<view class="head">
				<view class="card_day">
					<view class="card-1 day_show">
						今日
					</view>
					<view class="card-2">
						昨日
					</view>
				</view>
				<!-- @click="toggleShow" -->
				<view class="card-3" @click="show=true">
					<u-icon name="calendar" size="30" label="自定义"></u-icon>
					<view class="choosetime" v-if="show">
						<u--text @click="sendlog()" text="一周内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="一个月内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="三个月内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="半年内" size="13" align="center" lineHeight="50rpx"></u--text>
						<u--text text="一年内" size="13" align="center" lineHeight="50rpx"></u--text>
					</view>
				</view>
				<view v-if="show" class="overlay" @click="show=false"></view>
			</view>
			<view class="hr"></view>

			<view class="body">
				<view class="card-4">
					<view>
						<view class="img1">
							<image src="@/static/images/wpc/shouru.png"></image>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="80rpx" size="18" :text="saler"></u--text>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="30rpx" text="收入"></u--text>
						</view>
					</view>
				</view>
				<view class="card-4">
					<view>
						<view class="img2">
							<image src="@/static/images/wpc/dingdan.png"></image>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="80rpx" size="18" :text="orderCount"></u--text>
						</view>
						<view class="tinfo">
							<u--text align="center" lineHeight="30rpx" text="订单数"></u--text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="card">
			<view class="head1">
				收入分布
			</view>
			<view class="hr"></view>
			<view class="yuanhuan">
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="salerOpts" :chartData="salerData" canvasId="myRingChart" />
				</view>
			</view>
		</view>

		<view class="card" style="height: 800rpx;">
			<view class="head1">
				订单分布
			</view>
			<view class="hr"></view>
			<view class="zhuzhuangtu">
				<view class="charts-box1">
					<qiun-data-charts type="mount" :opts="orderOpts" :chartData="orderData" canvasId="myColumnChart" />
				</view>
			</view>
		</view>

		<!-- <view class="card" style="height: 800rpx;">
			<view class="head1">
				<input type="text" style="background-color: aqua;" v-model="loginForm.code" />
				<img :src="codeUrl" @click="getCode" style="width: 200rpx; height: 60rpx;" />
				<button @click="setToken()" style="width: 100px; height: 100px;">登录</button>
				<button @click="getNotice()" style="width: 100px; height: 100px;">获取</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				// 当前的商户id
				shop_id: 1,
				// 查询范围 -1 今天 1 昨天（历史）
				dataRange: -1,
				nowDate: "",
				// 查询数据
				orderList: [{
					name: "维修",
					data: 0,
					value: 0
				}, {
					name: "保养",
					data: 0,
					value: 0
				}, {
					name: "洗车",
					data: 0,
					value: 0
				}],
				// 收入
				saler: 0,
				// 扇形图 -- 收入分布
				salerData: {
					// categories: ['洗车', '保养'],
					series: [{
						name: '维修',
						data: 0,
					}, {
						name: '保养',
						data: 0,
					}, {
						name: '洗车',
						data: 0,
					}],
				},
				salerOpts: {
					color: ['#fd7aa4', '#947fff'], // 设置颜色
					title: {
						name: ''
					},
					subtitle: {
						name: ''
					}
				},
				// 订单数
				orderCount: 0,
				// 直方图 -- 订单分布
				orderData: {
					series: [{
						data: [{
							name: "维修",
							value: 0
						}, {
							name: "保养",
							value: 0
						}, {
							name: "洗车",
							value: 0
						}]
					}],
				},
				orderOpts: {
					color: ['#fd7aa4', '#947fff', '#5cdbd3'],
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.4
						}
					}
				},

				// loginForm: {
				// 	code: '',
				// 	password: "admin123",
				// 	username: "admin",
				// 	uuid: ""
				// },
				// codeUrl: '',
			};
		},

		methods: {
			// 获取商户id
			getShopId() {
				this.shop_id = uni.getStorageSync("shop_id");
				console.log(this.shop_id);
			},
			// 获取订单
			getNotice() {
				let that = this;
				this.$http({
					url: '/api/management/management/byshopid/' + that.shop_id,
					method: 'GET',
					success(res) {
						// console.log(res.data.rows)
						if (res.data.rows.length) {
							that.orderCount = res.data.rows.length;
						} else {
							that.orderCount = 0;
						}

						res.data.rows.forEach((item) => {
							// console.log(item.serviceId)
							// console.log(item.realPrice)
							// console.log(item.verificationTime)
							that.saler += item.realPrice;
							that.orderList[item.serviceId - 1].value += 1;
							that.orderList[item.serviceId - 1].data += item.realPrice;
						});
						// console.log(that.orderList)
						that.salerData.series = that.orderList;
						that.orderData.series[0].data = that.orderList;
					}
				});
			},
			// 获取当前时间
			getNowDate(range) {
				console.log(Date.now())
				let time = Date.now() - (1000 * 60 * 60 * 24 * range);
				const now = new Date(time);
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				this.nowDate = year + '-' + month + '-' + day;
				console.log(this.nowDate);
			},
			// // 获取验证码函数
			// getCode() {
			// 	// 直接从原型链中获取封装好的request对象即可
			// 	let that = this;
			// 	this.$http({
			// 		url: '/api/code',
			// 		method: 'GET',
			// 		success(res) {
			// 			that.codeUrl = "data:image/gif;base64," + res.data.img;
			// 			// console.log(that.codeUrl)
			// 			// console.log(res.data.uuid)
			// 			that.loginForm.uuid = res.data.uuid;
			// 		}
			// 	})
			// },
			// // 获取并设置token
			// setToken() {
			// 	let that = this;
			// 	// 接受数据，发送请求即可
			// 	this.$http({
			// 		url: '/api/auth/login',
			// 		method: 'POST',
			// 		data: that.loginForm,
			// 		success(res) {
			// 			// console.log(res)
			// 			// 如果登录成功，则需要把token保存到本地
			// 			if (res.data.code == 200) {
			// 				// 缓存数据
			// 				uni.setStorageSync("token", res.data.data.access_token);
			// 				// console.log(res.data.data.access_token)
			// 				//跳转页面
			// 				console.log("登录成功")
			// 			} else {
			// 				alert('登录失败！')
			// 			}
			// 		}
			// 	})
			// },



			// toggleShow() {
			// 	this.show = !this.show;
			// }
			sendlog() {
				console.log("111")
			},
			return_btn() {
				uni.$u.route('/pages/lzx/business/homePage');
			}
		},
		onLoad() {
			this.getShopId();
			this.getNowDate(this.dataRange);
			// this.getCode();
			this.getNotice();
		}
	};
</script>
<style lang="scss">
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		opacity: 1;
	}

	.choosetime {
		position: absolute;
		width: 160rpx;
		height: 250rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		z-index: 7;
	}


	.bgtop {
		width: 100vw;
		background-color: #3183fc;
		height: 300rpx;
		overflow: auto;
	}

	.top {
		z-index: 3;
		width: 100vw;
		background-color: #3183fc;
		height: 150rpx;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.card {
		width: 95%;
		box-sizing: border-box;
		height: 600rpx;
		margin: 10px auto;
		position: relative;
		bottom: 150rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		padding: 30rpx 25rpx;

		.card_day {
			display: flex;
			flex-flow: row nowrap;
			border-radius: 30rpx;
			font-size: 30rpx;
			overflow: hidden;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
			background-color: #f2f2f2;
			color: #2f81fa;
		}

		.card-1 {
			width: 150rpx;
		}

		.card-2 {
			width: 150rpx;
		}

		.day_show {
			background-color: #2f81fa;
			color: #fff;
		}

		.card-3 {
			width: 200rpx;
			height: 60rpx;
			position: absolute;
			right: -20rpx;
		}

		.head {
			display: flex;
			justify-content: center;
		}

		.hr {
			margin-top: 30rpx;
			border: 2px solid #f3f3f3;
			border-radius: 2px;
		}

		.body {
			display: flex;
			justify-content: space-evenly;
			margin-top: 80rpx;
			align-items: center;
			/* 垂直居中 */



		}

		.card-4 {
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
			width: 220rpx;
			height: 250rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
		}

		.card-4 .img1 {
			width: 80rpx;
			height: 80rpx;
			background-color: red;
			// margin-left: 30rpx;
			display: flex;
			margin: 0 auto;
			/* 使用Flexbox布局 */
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			border-radius: 20rpx;

		}

		.card-4 .img2 {
			width: 80rpx;
			height: 80rpx;
			background-color: #479bff;
			// margin-left: 30rpx;
			display: flex;
			margin: 0 auto;
			/* 使用Flexbox布局 */
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			border-radius: 20rpx;

		}

		.card-4 image {
			width: 40rpx;
			height: 40rpx;
		}

		.head1 {
			font-size: 35rpx;
			font-weight: bold;
		}

		.yuanhuan {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 400rpx;
			/* 调整高度以适应圆环大小 */
		}

		.charts-box {
			width: 100%;
			height: 100%;
		}

		.qiun-charts {
			width: 100%;
			height: 100%;
		}

		.charts-box1 {
			width: 100%;
			height: 600rpx;
			/* 确保有足够的高度 */
		}

	}
</style>